<template>
 <div class="cart">
     <el-header></el-header>
    <div class="cartlist" v-if="getCartList.length!==0">
        <ul >
            <li class="mycart-tit">
                <van-checkbox v-model="checked" checked-color="rgb(65, 200, 86)"></van-checkbox>
                <span class="store">E宠西部中央仓</span>
                <span class="helpico">?</span>
            </li>
            <li 
                class="mycart-item"
                v-for="item in getCartList"
                :key="item.gid"
            >
                <div class="checkbox">
                     <van-checkbox v-model="item.checked" checked-color="rgb(65, 200, 86)"></van-checkbox>
                </div>
                 <div class="goods">
                     <div class="goods-img">
                        <img  :src="item.photo" alt="">
                     </div>
                    <div class="goods-info">
                        <div class="info-title">{{item.subject}}</div>
                        <div class="price">
                            <h3>¥<span class="price-num">{{item.sale_price}}</span></h3>
                            <van-stepper :name="item.gid" @change="changeGoodsNum" :default-value="item.goods_num" theme="round" button-size="22"  />
                        </div>
                    </div>
                </div>
            </li>
    </ul>
    </div>
    <div class="empty" v-if="getCartList.length===0">购物车空空如也</div>
    <div class="submitBar" v-if="getCartList.length!==0">
        <van-submit-bar :price="getTotalPrice" button-text="提交订单" >
            <van-checkbox v-model="allChecked" checked-color="rgb(65, 200, 86)">全选</van-checkbox>
        </van-submit-bar>
    </div>
 </div>
</template>
    
<script>
import Vue from 'vue';
import { Checkbox, CheckboxGroup, Stepper, SubmitBar } from 'vant';

import header from '@/components/header/catheader.vue';
import { mapGetters } from 'vuex'

Vue.use(SubmitBar);
Vue.use(Stepper);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
export default {
    data() {
        return {
            checked: true,
           
        }
    },
    mounted(){
    },
    computed:{
        ...mapGetters(['getCartList','getAllChecked']),
        getTotalPrice() {
            return this.getCartList.filter(v=>v.checked===true).reduce((value,item)=>{
                return value + Number(item.sale_price) * Number(item.goods_num)
            },0) * 100
            
        },
        allChecked:{
            get() {
                 return this.getCartList.every(v=>v.checked===true);
            },
            set(newValue) {

            }
        }
    },
    
    components:{
        'el-header':header,
    },
    methods:{
        changeGoodsNum(value,{ name }) {
            this.$store.commit('changeGoodsNum',{id:name,number:value})
        },
        allChecked() {
            this.allChecked == false
        }
    }
}
</script>
 
<style scoped lang = "stylus">
.cart 
    height 100%
    display flex
    flex-direction column
    .cartlist
        flex 1
        background #f5f5f5
        overflow auto
        li
            background #fff
.mycart-tit
    display flex
    padding .1rem
    align-items center
    .store
        font-size .15rem
        padding 1px 5px 0 0
    .helpico
        border-radius: 50%;
        width: 18px;
        height: 18px;
        line-height: 16px;
        display: inline-block;
        text-align center
        font-size: 13px;
        margin-top: 0px;
        background: #fbeacf;
        border: 1px solid #fbeacf;
        color: #ecb44b;
.mycart-item
    display flex
    padding-left .1rem
.checkbox
    display flex
    align-items center
    width .2rem
.goods
    display flex
    flex 1
    padding .1rem 0
    border-bottom: 1px solid #ebebeb;
    .goods-img 
        width .85rem
        height .85rem
        img 
            width 100%
    .goods-info
        padding-right .1rem
        flex 1
        .price
            display flex
            justify-content space-between
            margin-top .1rem
            font-size .12rem
            h3
                color #f05757
                span 
                    font-size .15rem
            
        .info-title
            word-break break-all
            display block
            font-size .12rem
            color #333
            line-height .16rem
.submitBar
    height .5rem
    width 100%
.empty
    text-align center
</style>